<template>
  <div class="my-tag">
    <input
      class="input"
      type="text"
      placeholder="输入标签"
      v-if="isKey"
      v-foucs
      @blur="isKey = false"
      v-model="iptVal"
      @keyup.enter="enter"
    />
    <div class="text" v-else @dblclick="dbClk">{{ tag }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isKey: false,
      iptVal: "",
    };
  },
  props: {
    tag: {
      type: String,
      required: true,
    },
    id: {
      type: Number,
      required: true,
    },
  },
  created() {
    // 将取到的值赋值给iptVal
    this.iptVal = this.tag;
  },
  methods: {
    // 双击事件
    dbClk() {
      this.isKey = true;
    },
    // 回车事件
    enter() {
      // 传入输入都值与对应列表的id
      this.$emit("enterVal", { val: this.iptVal, id: this.id });
      //隐藏表单
      this.isKey = false;
    },
  },
};
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>